<template>
  <div  style="width: 100%;min-height:100%" >
    <div style="display: flex">
      <div style="margin-left: 30px"><h1>
        智慧校园---学生用户信息
      </h1></div>

    </div>

    <div style="margin: 30px 0">
      <div style="font-weight: 550;display: flex">
        <div style="margin-left: 30px">
          <el-input style="width: 250px;margin-left: 10px" v-model="stuid"  :suffix-icon="Search" placeholder="输入你想查询的学号"/>
        </div>
      </div>

      <div style="text-align: right;position: relative;right: 10px;">
        <el-button icon="Search" type="primary" @click="selectStudent">搜索</el-button>
        <el-button icon="Plus" type="success" @click="AddStudent">新增</el-button>
        <el-button icon="Refresh" type="success" @click="Refresh">刷新</el-button>
        <!--消息提示-->
        <el-tooltip
            class="box-item"
            content="学生信息提示"
            placement="top"
        >
          <el-badge :value="updatedNum1" :max="99" class="item">
            <el-icon @click="openMessage" style="width: 50px;height: 50px">
              <Message/>
            </el-icon>
          </el-badge>
        </el-tooltip>
        <!--信息提示弹窗-->
        <el-dialog
            v-model="dialogVisible1"
            title="提示"
            width="30%"
            :before-close="handleClose"
        >
          <span v-if="updatedNum1>0">你的学籍信息页面有{{updatedNum1}}条新增数据</span>
          <span v-else>你的学籍信息页面无数据更新</span>
          <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="queren">确认</el-button>
      </span>
          </template>
        </el-dialog>

      </div>
    </div>

<!--    table-->
    <div style="margin-left: 30px">
      <el-table border :stripe="true" :show-header="true" :data="tableData" :header-cell-style="{background:'#d0d0d0',color:'#000000'}">
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="sex" label="性别">
        </el-table-column>
        <el-table-column prop="nation" label="民族">
        </el-table-column>
        <el-table-column prop="age" label="年龄">
        </el-table-column>
        <el-table-column prop="stuid" label="学号">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" style="width: 200px">
        </el-table-column>
        <el-table-column prop="phone" label="电话">
        </el-table-column>
        <el-table-column prop="atschool" label="是否在校">
          <template #default="scope">
            <div v-if="scope.row.atschool=='1'">在校</div>
            <div v-if="scope.row.atschool=='0'">离校</div>
          </template>
        </el-table-column>
        <el-table-column prop="finishischool" label="是否毕业">
          <template #default="scope">
            <div v-if="scope.row.finishischool=='1'">已毕业</div>
            <div v-if="scope.row.finishischool=='0'">未毕业</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="info" @click="edit(scope.row)" >修改<el-icon><Edit/></el-icon></el-button>
            <el-button type="danger" @click="del(scope.row.stuid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    分页-->
    <div  style="margin-top: 20px;margin-left:30px">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[2, 5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>

<!--新增对话框-->
    <el-dialog v-model="dialogFormVisible" title="学生信息新增">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="form.sex" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth">
          <el-input v-model="form.nation" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input v-model="form.stuid" autocomplete="off"  style="width: 300px;border: #545454 solid 1px;border-radius: 5px" />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"  style="width: 300px;border: #545454 solid 1px;border-radius: 5px" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" style="width: 300px;border: black solid 1px;border-radius: 5px"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = !dialogFormVisible">取消</el-button>
        <el-button type="primary" @click="save">新增</el-button>
      </span>
      </template>
    </el-dialog>
<!--修改的弹窗-->
    <el-dialog v-model="dialogFormVisible1" title="学生信息修改">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="form.sex" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="民族" :label-width="formLabelWidth">
          <el-input v-model="form.nation" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"   style="width: 300px;border: #545454 solid 1px;border-radius: 5px"/>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"  style="width: 300px;border: #545454 solid 1px;border-radius: 5px" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" style="width: 300px;border: black solid 1px;border-radius: 5px"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="ConfirmUpdate">确认修改</el-button>
      </span>
      </template>
    </el-dialog>


  </div>
</template>

<script lang="ts" setup>
import {computed, onMounted, ref} from "vue";
import {AddStudentInfo, delStudentById, SelectAllStudent, updateStudent,selectByStuIdStudent} from "../../api/Second";
import {ElMessage, ElMessageBox} from 'element-plus'
import {Search} from "@element-plus/icons-vue";
const tableData = ref()
const stuid = ref('')
//分页
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const total=ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
//初始化数据
function load(){
  SelectAllStudent(
     pageNum.value,
     pageSize.value
  ).then(res=>{
    console.log(res)
    let status =res.data.status
    let errorMsg =res.data.data.errorMsg
    if (status===200){
      tableData.value = res.data.data.list
      total.value = res.data.data.total
    }else {
      console.log(errorMsg)
    }
  })
}
//分页
const  handleCurrentChange =(res)=>{
  console.log(res)
  //我的这个pageNum是获取到的pageNum
  pageNum.value=res
  load()
}
const handleSizeChange =(res1)=>{
  console.log(res1)
  pageSize.value=res1
  load()
}


//刷新页面
function Refresh(){
  stuid.value =''
  load()
}


//新增
let dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = ref({})
function AddStudent(){
      dialogFormVisible.value=!dialogFormVisible.value
      form.value ={}
}
function save(){
  let form1 = form.value
  AddStudentInfo(form1).then(res=>{
    console.log(res)
    if (res.data.status===200){
      ElMessage.success('学生信息添加成功!')
      dialogFormVisible.value=false
      Num1.value ++
      localStorage.setItem('Num1', Num1.value.toString());
      load()
    }else {
      ElMessage.error('学生信息添加失败!')
    }
  })}
//修改
let dialogFormVisible1 = ref(false)
function edit(row){
 dialogFormVisible1.value =!dialogFormVisible1.value
  form.value = row
}
//确认修改
function ConfirmUpdate(){
    let form1 =form.value
    updateStudent(form1).then(res=>{
      console.log(res)
      if (res.data.status===200){
        ElMessage({
          message:'学生信息修改成功!!',
          type:'success',
          showClose: true
        })
        dialogFormVisible1.value=!dialogFormVisible1.value
      }else {
        ElMessage({
          message:'学生信息修改失败!!',
          type:'error',
          showClose:true
        })
      }
    })
}
//取消
function Cancel(){
  dialogFormVisible1.value=!dialogFormVisible1.value
  ElMessage({
    message:'你已取消修改学生信息!!',
    type:'info',
    showClose:true
  })
}
//删除
function del(stuid){
  ElMessageBox.confirm(
      '你确认要删除该条信息吗？',
      '提示',
  ).then(()=>{
    delStudentById({"stuid":stuid}).then(res=>{
      console.log("res的结果是:"+res)
      if (res.data.status===300){
        ElMessage({
          message:'该学生信息在学籍表中存在，请删除学籍表信息后再试',
          type:'error',
          showClose:true
        })
      }else {
        ElMessage({
          message:'删除成功！！',
          type:'success',
          showClose:true
        })
        load()
      }
    })
  }).catch(()=>{
    ElMessage({
      message:'已取消删除',type:'success',showClose:true
    })
  })

}
//搜索
function selectStudent() {
  selectByStuIdStudent({"stuid": stuid.value}).then(res => {
    console.log(res)
    let status= res.data.status
    if (status === 200) {
      ElMessage({
        message: '查询成功',
        type: 'success',
        showClose: true
      })
      const stu3 =res.data.data
      const array =new Array()
      array.push(stu3);
      tableData.value=array
    }else {
      tableData.value=res.data.data
    }
  })
}

//数据本地存储
const  Num1 =ref(0)
const storeNum1 =localStorage.getItem('Num1')
if (storeNum1){
  Num1.value = parseInt(storeNum1)
}
const updatedNum1=computed(()=>{
  return Num1.value
});
let dialogVisible1 =ref(false)
function openMessage(){
  dialogVisible1.value = !dialogVisible1.value
}
function  queren(){
  localStorage.removeItem('Num1')
  dialogVisible1.value=!dialogVisible1.value
}

//初始化加载
onMounted(()=>{
  load();
  // 页面加载时，从本地存储中读取Num的值
  const storedNum1 = localStorage.getItem('Num1');
  if (storedNum1) {
    Num1.value = parseInt(storedNum1);
  }
})
</script>

<style scoped>
h1 {
  font-family: 隶书;
  /*box-shadow: #c9c4c4 10px 10px 10px 10px;*/
  font-size: 36px;
  /* 本例12个文字(加标点符号)；有多少个文字，width就是多少个em */
  width: 12.5em;
  /* 加上两个动画，一个是打字动画，使用steps让字一个一个的出现，
   注意step和字数保持一致，光标动画也是同理，*/
  animation: typingWords 10s steps(10) infinite, cursor 0.5s steps(1) infinite;
  /* 要设置不允许换行，且溢出隐藏 */
  white-space: nowrap;
  overflow: hidden;
  /* 使用右边框作为打印的指针光标 */
  border-right: 1px solid #000;
}

@keyframes typingWords {
  0% {
    width: 0;
  }
  50%{
    width:11.5em ;
  }
  100%{
    width:11.5em ;
  }
}

@keyframes cursor {
  50% {
    border-color: transparent;
  }
}

.headerBg {
  background: #eeeeee !important;
  color: rgb(0, 0, 0);
  font-size: 16px;
}
</style>